<template>
  <div class="register-inside">
    <div class="title">
      <div class="left">忘记密码</div>
      <div class="right cursor-pointer flex items-center" @click="setStatus(1)">
        返回登录<el-icon><ArrowRight /></el-icon>
      </div>
    </div>
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="register.registerInfo"
      label-width="0"
      label-position="top"
    >
      <el-form-item label="" prop="user_name">
        <el-input v-model="register.registerInfo.user_name" placeholder="请输入用户名">
          <!-- <template #prepend></template> -->
        </el-input>
      </el-form-item>
      <el-form-item class="verificationCode">
        <el-input
          v-model="register.registerInfo.VerificationCode"
          placeholder="请填写验证码"
          class="input-with-select"
        >
          <template #append>
            <el-button type="primary" @click="sendVerificationCode">
              {{ isSend ? `${countdown}s 后重新获取` : "发送验证码" }}
            </el-button>
          </template>
          <!-- <template #prepend>1</template> -->
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="password">
        <el-input
          v-model="register.registerInfo.password"
          show-password
          placeholder="请设置密码"
        />
      </el-form-item>
      <el-form-item label="" style="margin-bottom: 45px" prop="verifyPassword">
        <el-input
          v-model="register.registerInfo.verifyPassword"
          show-password
          placeholder="请再次输入密码"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" class="register" @click="loginSubmit(ruleFormRef)"
      >注册</el-button
    >
    <div class="otherInformation">
      <div class="left select-none cursor-pointer" @click="setStatus(1)">返回登录</div>
      <div class="right select-none cursor-pointer" @click="setStatus(3)">忘记密码？</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useLoginStore } from "@/store/login/login";
const login = useLoginStore();
const { setStatus } = login;
const register = ref({
  registerInfo: {},
});
// 验证码
const time = ref(null)
const countdown = ref(60)
const isSend = ref(false)
const sendVerificationCode = () => {
  if (time.value) return
  countdown.value = 60
  isSend.value = true
  time.value = setInterval(() => {
    countdown.value--
    console.log(1)
    if (countdown.value == 0) {
      isSend.value = false
      clearInterval(time.value)
      time.value = null
    }
  }, 1000)
}
</script>

<style lang="scss" scoped>
.register-inside {
  padding: 48px;
  box-sizing: border-box;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .left {
      font-size: 36px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 52px;
      color: rgba(0, 0, 0, 0.9);
    }
    .right {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 52px;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .el-form-item {
    margin-bottom: 24px;
    :deep(.el-input) {
      height: 64px;
      font-size: 18px;
      .el-input__wrapper {
        padding: 0 27px;
      }
    }
  }
  .register {
    width: 100%;
    height: 55px;
    margin-bottom: 35px;
  }
  .otherInformation {
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 26.06px;
      color: rgba(0, 0, 0, 0.9);
    }

    .left {
      color: rgba(36, 104, 242, 1);
    }
  }
}
.verificationCode {
  :deep(.el-input__wrapper) {
    box-shadow: none;
    border: 1px solid #dcdfe6;
    border-right: none;
  }
  :deep(.el-input-group__append) {
    background-color: transparent !important;
    width: 160px;
    .el-button {
      width: 160px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
